<template>
  <div class="app-container">
    <el-dialog
      :title="selectDate ? '编辑用户' : '添加用户'"
      :visible="visible"
      @update:visible="$emit('update:visible', $event)"
      @closed="clean"
    >
      <el-form
        ref="addUserFormRef"
        label-width="120px"
        :model="formData"
        :rules="formRules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username" style="width: 80%" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" style="width: 80%" />
        </el-form-item>
        <el-form-item v-if="!selectDate" label="密码" prop="password">
          <el-input v-model="formData.password" style="width: 80%" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="formData.role" style="width: 80%" />
        </el-form-item>
        <el-form-item label="权限组名称" prop="introduction">
          <el-select
            v-model="permission_group_title"
            style="width: 80%"
            placeholder="请选择"
          >
            <!-- @change="selectChange($event)" -->
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formData.phone" style="width: 80%" />
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input v-model="formData.introduction" style="width: 80%" />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center" align="center">
        <el-button @click="$emit('update:visible', false)">取消</el-button>
        <el-button type="primary" @click="addUserClick">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { addUserAPI, editUserAPI } from '@/api/index'
export default {
  name: 'DialogUser',
  props: {
    visible: Boolean,
    // eslint-disable-next-line vue/require-default-prop
    selectDate: Object
  },
  data() {
    return {
      formData: {
        avatar: '',
        email: '',
        introduction: '',
        password: '',
        permission_group_id: 0,
        phone: '',
        role: '',
        username: ''
      },
      options: [
        {
          value: '2',
          label: '超级管理员'
        },
        {
          value: '3',
          label: '编辑组'
        }
      ],
      permission_group_title: '',
      formRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
	watch: {
    selectDate: {
      handler(val) {
        if (!val) return;
        console.log(val);
          this.formData = {
            avatar: val.avatar,
            email: val.email,
            introduction: val.introduction,
            password: val.password,
            permission_group_id: val.permission_group_id,
            phone: val.phone,
            role: val.role,
            username: val.username
          }
          this.permission_group_title = val.permission_group_title
      }
    }
  },
	methods: {
		// 点击确定按钮，通过用户id判断，是添加  还是编辑
			async addUserClick() {
				this.$refs.addUserFormRef.validate(async(isok) => {
					if (isok) {
						if (this.selectDate) {
						await editUserAPI(this.selectDate.id, this.formData);
            this.$message.success('编辑成功');
          } else {
						console.log(22);
            await addUserAPI(this.formData);
            this.$message.success('添加成功');
          }
        }
        this.$emit('update:visible', false);
        this.$emit('success')
      })
		},
		// 清空表单
    clean() {
      this.permission_group_title = ''
      this.$refs.addUserFormRef.resetFields();
      this.$emit('delete')
			}

	}
}
</script>

<style scoped>
.app-container{
	padding: 15px;
}
::v-deep .el-card__body{
	padding-top: 3px;
}
::v-deep .el-dialog{
	border-radius: 15px;
}
::v-deep .el-dialog__header{
	background-color:#409eff;
	border-radius: 15px 15px 0 0;

}
::v-deep .el-dialog__title{
	color:#fff;
}
::v-deep .el-dialog__close{
	color:#fff
}
</style>

